<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>testMap</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
	<script type="text/javascript">

	var baiyunshan=Object();
		baiyunshan.lat1=23.490879;
		baiyunshan.lon1=111.333872;
		baiyunshan.name="白云山";

	var longmumiao=Object();
		longmumiao.lat1=23.485438;
		longmumiao.lon1=111.311073;
		longmumiao.name="龙母庙";

	var zhongshangongyuan=Object();
		zhongshangongyuan.lat1=23.479854;
		zhongshangongyuan.lon1=111.318509;
		zhongshangongyuan.name="中山公园";

	var lijishen=Object();
		lijishen.lat1=23.30787;
		lijishen.lon1=111.28215;
		lijishen.name="李济深故居";
		
	var changzhoujichang=Object();
		changzhoujichang.lat1=23.5;
		changzhoujichang.lon1=111.333333;
		changzhoujichang.name="常州机场";

var map = null;
function initialize() {
	//初始地图中心点
	var myLatlng = new google.maps.LatLng(23.492 ,111.445);
	//地图属性
	var myOptions = {
		zoom: 11,
		streetViewControl:false,
		mapTypeId: google.maps.MapTypeId.ROADMAP,					//初始地图类型
		center: myLatlng,
		//disableDoubleClickZoom:true,
		//scaleControl:true,
		maxZoom: 21,
		minZoom: 1,
		//mapTypeControlOptions:{										//地图类型控件
		//style:google.maps.MapTypeControlStyle.DEFAULT,
		//position: google.maps.ControlPosition.TOP,
		//mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE]
		//},    //地图类型种类
		navigationControlOptions:{									//缩放、拖动地图控件
			style:google.maps.NavigationControlStyle.ZOOM_PAN,
			position: google.maps.ControlPosition.TOP_RIGHT
		},
		scaleControlOptions:{										//显示地图比例控件
			style:google.maps.ScaleControlStyle.DEFAULT,
			position: google.maps.ControlPosition.BOTTOM_RIGHT
		}
	};
	//初始化地图DIV
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	google.maps.event.addListener(map, 'idle', function(){
		
	});
	google.maps.event.addListener(map, 'click', function(event){
		
	});
	google.maps.event.addListener(map, 'zoom_changed', function(){
	});
	Marker();
}
//var infowindow = new google.maps.InfoWindow({
//    content: 'Hello world'
//  });
  
var markerArr=[];
var point= [baiyunshan,longmumiao,zhongshangongyuan,lijishen,changzhoujichang];
function Marker(){
	var center = map.getCenter();
	var latlng = null, marker =null;
	markerArr = [];

	for(var i = 0; i < 5; i++){
		latlng = new google.maps.LatLng(point[i].lat1,point[i].lon1);
		marker=new google.maps.Marker({
			position: latlng,
			title:point[i].name
		});
		markerArr.push(marker);

	    var infowindow = new google.maps.InfoWindow({
	        content: "djfhdsjfhsjdfhjdh"+i,
	        //position: latlng
	    });
		google.maps.event.addListener(marker, 'click', function() {
	        // Opening the InfoWindow

        // Adding a click event to the marker
		infowindow.setPosition(marker.getPosition());
		infowindow.open(map,marker);

		});
	}
	setMarker();
	
}

function setMarker(){
	if(markerArr){
		for(var i in markerArr){
			markerArr[i].setMap(map);
		}
	}
}

function hideMarker(){
	if(markerArr){
		for(var i in markerArr){
			markerArr[i].setMap(null);
		}
	}
}

	</script>
	
  </head>
  
  <body onload="initialize();">
  <div id="map_canvas" style="width: 1310px; height: 610px;float:left;"></div>
  <button onclick="setMarker();">显示标注</button>
  <button onclick="hideMarker();">隐藏标注</button>
  </body>
</html>